<template>
    <div v-if="zdyArryListNew.length" class="bb1">
        <!-- 自定义字段展示 -->
        <div v-for="(zdyItem, z) in zdyArryListNew" :key="(zdyItem.alias || zdyItem.fieldRule.desc) + z"
            :class="zdyItem.fieldRule.ctrlType === 'textarea' ? 'textarea-class' : ''">
            <template v-if="title === zdyItem.fieldRule.valueName">
                <template v-if="zdyItem.fieldRule.ctrlType === 'input'  && !!zdyItem.display">
                    <van-field v-model="zdyItem.value" readonly :label="zdyItem.desc" />
                </template>
                <template v-else-if="zdyItem.fieldRule.ctrlType === 'textarea' && !!zdyItem.display">
                    <van-field v-model="zdyItem.value" readonly :label="zdyItem.desc" />
                </template>
                <template v-else-if="zdyItem.fieldRule.ctrlType === 'number' && !!zdyItem.display">
                    <van-field v-model="zdyItem.value" readonly :label="zdyItem.desc" />
                </template>
                <template v-else-if="zdyItem.fieldRule.ctrlType === 'select' && !!zdyItem.display">
                    <van-field v-model="zdyItem.value" readonly :label="zdyItem.desc" />
                </template>
                <template v-else-if="(zdyItem.fieldRule.ctrlType === 'time' || zdyItem.fieldRule.ctrlType === 'date') && !!zdyItem.display">
                    <van-field v-model="zdyItem.value" readonly :label="zdyItem.desc" />
                </template>
                <template v-else-if="zdyItem.fieldRule.ctrlType === 'radio' && !!zdyItem.display">
                    <van-field v-model="zdyItem.value" readonly :label="zdyItem.desc" />
                </template>
                <template v-else-if="zdyItem.fieldRule.ctrlType === 'checkbox' && !!zdyItem.display">
                    <van-field v-model="zdyItem.value" readonly :label="zdyItem.desc" />
                </template>
            </template>
        </div>
    </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
export default {
    data() {
        return {
            zdyArryListNew: []
        }
    },
    async created() {
    },
    props: {
        zdyArryList: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
        form: {
            type: Object,
            default: () => { }
        }
    },
    watch: {
        zdyArryList: {
            immediate: true,
            deep: true,
            handler(val) {
                this.zdyArryListNew = []
                // console.log(val);
                val.length && val.forEach(e => {
                    if (e.fieldRule && e.fieldRule.ctrlType && e.customize) {
                        e.fieldRule.fieldKey = e.fieldKey
                        e.fieldRule.isShow = e.isShow
                        e.fieldRule.value = e.value
                        e.fieldRule.valueName = e.fieldRule.descPath.split(',')[0]
                        this.zdyArryListNew.push(e)
                    }
                })
                // console.log(this.zdyArryListNew);
                // console.log('zdyArryListNew');
            }
        }
    },
    methods: {
        dateTime(v, s = 'yyyy-MM-dd hh:mm') {
            if (v) {
                return formatDate(new Date(v), s)
            }
            return '--'
        },
        changeName(row, val) {
            let name = ''
            row.fieldRule.selectOption.forEach(e => {
                if (e.key === val) {
                    name = e.value
                }
            })
            return name
        },
        changeInput(val) {
            console.log(val);
        },
        checkChange(value, ele, i) {
            console.log('选中的值:', value);
            console.log('当前选项:', ele);
            console.log('索引:', i);
        }
    }
}
</script>
<style lang="less">
.form-box-zdy2 {
    width: 100% !important;

    .el-form-item--small.el-form-item {
        width: 33%;
        display: inline-block;
        margin-bottom: 0 !important;

        .el-form-item__content {
            white-space: nowrap;
        }
    }

    .textarea-class {
        display: block !important;
        width: 100% !important;
        margin-top: 20px;
    }

    .el-checkbox {
        margin-right: 8px;
    }
}
</style>
